<template>
	<el-form ref="paramsFormRef" class="params-form main-page" :inline="true" label-position="left" label-width="90px" :model="paramsForm" :rules="paramsRules">
		<div class="fixed-menu">
			<el-button @click="handleCancel">取 消</el-button>
			<el-button type="primary" @click="handleSave">保 存</el-button>
		</div>
		<div class="card-wapper">
			<el-card class="box-card" shadow="never">
				<template #header>
					<div class="card-main-title">基础配置</div>
				</template>
				<el-row :gutter="16" justify="start">
					<el-col :span="8">
						<el-form-item class="form-item" label="任务分组:" prop="jobGroup">
							<el-select-v2 v-model="paramsForm.jobGroup" class="el-form-item" clearable filterable :options="options" placeholder="请选择任务分组" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="form-item" label="任务名称:" prop="jobDesc">
							<el-input v-model="paramsForm.jobDesc" placeholder="请输入任务名称" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="form-item" label="调度类型:" prop="scheduleType">
							<dict-select v-model="paramsForm.scheduleType" :dictKey="'schedule_type'" placeholder="请选择调度类型" />
						</el-form-item>
					</el-col>
					<el-col :span="8" v-if="paramsForm.scheduleType == 'FIX_RATE'">
						<el-form-item class="form-item" label="固定速度:" prop="scheduleConf">
							<el-input v-model="paramsForm.scheduleConf" placeholder="请输入 (Second)" />
						</el-form-item>
					</el-col>
					<el-col :span="8" v-else>
						<el-form-item class="form-item" label="表达式:" prop="scheduleConf">
							<el-input v-model="paramsForm.scheduleConf" placeholder="请输入Cron表达式" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-card>
		</div>
		<div class="card-wapper">
			<el-card class="box-card" shadow="never">
				<template #header>
					<div class="card-main-title">任务配置</div>
				</template>
				<el-row :gutter="16" justify="start">
					<el-col :span="8">
						<el-form-item class="form-item" label="运行模式:" prop="glueType">
							<dict-select v-model="paramsForm.glueType" :dictKey="'glue_type'" placeholder="请选择运行模式" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="form-item" label="JobHandler:" label-width="100px" prop="executorHandler">
							<el-input v-model="paramsForm.executorHandler" placeholder="请输入JobHandler" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item class="form-item" label="任务参数:" prop="executorParam">
							<el-input v-model="paramsForm.executorParam" placeholder="请输入JobHandler" rows="2" type="textarea" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-card>
		</div>
		<div class="card-wapper">
			<el-card class="box-card" shadow="never">
				<template #header>
					<div class="card-main-title">高级配置</div>
				</template>
				<el-row :gutter="16" justify="start">
					<el-col :span="8">
						<el-form-item class="form-item" label="路由策略:" label-width="100px" prop="executorRouteStrategy">
							<dict-select v-model="paramsForm.executorRouteStrategy" :dictKey="'executor_route_strategy'" placeholder="请选择路由策略" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="form-item" label="子任务ID:" label-width="100px" prop="childJobid">
							<el-input v-model="paramsForm.childJobid" placeholder="请输入子任务的任务ID,如存在多个则逗号分隔" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="form-item" label="调度过期策略:" label-width="100px" prop="misfireStrategy">
							<dict-select v-model="paramsForm.misfireStrategy" :dictKey="'misfire_strategy'" placeholder="请选择调度过期策略" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="form-item" label="阻塞处理策略:" label-width="100px" prop="executorBlockStrategy">
							<dict-select v-model="paramsForm.executorBlockStrategy" :dictKey="'executor_block_strategy'" placeholder="请选择阻塞处理策略" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="form-item" label="任务超时时间:" label-width="100px" prop="executorTimeout">
							<el-input v-model="paramsForm.executorTimeout" placeholder="任务超时时间，单位秒，大于零时生效" />
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="form-item" label="失败重试次数:" label-width="100px" prop="executorFailRetryCount">
							<el-input v-model="paramsForm.executorFailRetryCount" placeholder="失败重试次数，大于零时生效" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-card>
		</div>
	</el-form>
</template>
<script setup>
import global from '@/utils/global'
import mittBus from '@/utils/mitt'

const props = defineProps({
	action: {
		type: String,
		default: 'add',
	},
})
const route = useRoute()
const state = reactive({
	paramsForm: {
		jobDesc: '',
		scheduleType: 'CRON',
		scheduleConf: '',
		glueType: 'BEAN',
		executorRouteStrategy: 'FIRST',
		childJobid: '',
		misfireStrategy: 'DO_NOTHING',
		executorBlockStrategy: 'COVER_EARLY',
		executorTimeout: '',
		executorFailRetryCount: '',
		executorParam: '',
	},
	paramsRules: {
		jobDesc: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
		scheduleType: [{ required: true, message: '请选择调度类型', trigger: 'change' }],
		scheduleConf: [{ required: true, message: '请输入Cron表达式', trigger: 'blur' }],
		glueType: [{ required: true, message: '请选择运行模式', trigger: 'change' }],
	},
	paramsFormRef: null,
	options: [],
})

const { paramsForm, paramsRules, paramsFormRef, options } = toRefs(state)
/*
 *@Description: 生命周期
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-09-11 20:08:35
 */
onMounted(async () => {
	await handleModelIdReq()
	if (props.action != 'add') {
		getDetailData(route.query.id)
	}
})
/*
 *@Description: 方法模块
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-09-11 20:08:13
 */
const handleModelIdReq = () => {
	global.$fetchGetData('/meta-system/web/v1/job/getJobsByGroup', {}).then(data => {
		if (data.code == 200) {
			state.options = data.data
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}

const getDetailData = id => {
	global.$fetchGetData('/meta-system/web/v1/job/getInfo', { jobId: id }).then(data => {
		if (data.code == 200) {
			state.paramsForm = data.data
			state.paramsForm.jobGroup = String(data.data.jobGroup)
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}
const handleSave = () => {
	state.paramsFormRef.validate(valid => {
		if (valid) {
			if (route.query.id) {
				global.$fetchPostData('/meta-system/web/v1/job/update', state.paramsForm).then(data => {
					if (data.code == 200) {
						global.$baseMessage('保存成功', 'success')
						handleCancel()
					} else {
						global.$baseMessage(data.msg, 'error')
					}
				})
			} else {
				global.$fetchPostData('/meta-system/web/v1/job/add', state.paramsForm).then(data => {
					if (data.code == 200) {
						global.$baseMessage('保存成功', 'success')
						handleCancel()
					} else {
						global.$baseMessage(data.msg, 'error')
					}
				})
			}
		} else {
			return false
		}
	})
}
const handleCancel = () => {
	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }))
}
</script>
<style lang="scss" scoped>
.card-wapper {
	width: 100%;
	margin-bottom: 10px;
}
.params-form {
	position: relative;
	.fixed-menu {
		width: 100%;
		background-color: #fff;
		padding: 10px 20px;
		margin-bottom: 5px;
		text-align: right;
		border: 1px solid #ebeef5;
	}
}
</style>
